import React, { Component } from 'react'
import '../assert/css/cate.css'
import Header from '../components/DefaultHeader'
import {cateRequest,goodsRequest} from '../request/cate_request'
export default class cate extends Component {
    constructor(){
        super()
        this.state = {
            cate_list: [], //商品分类
            active_id: 1,
            cate_name: "时令水果",
            goods_list:[] //分类商品
        }
    }
    componentWillUnmount(){
        this.setState = ()=>false; //重置了setState
    }
    change_goods(active_id,cate_name){
        this.setState({active_id,cate_name})
        goodsRequest(active_id).then(
            res=>{
                this.setState({goods_list: res.list})
            }
        )
    }
    UNSAFE_componentWillMount(){
        cateRequest().then(res=>{
            this.setState({cate_list: res.list})
            var obj = res.list[0]
            this.change_goods(obj.id,obj.catename)
        })        
    }
    render() {
        const {cate_list,active_id,cate_name,goods_list} = this.state
        const {history} = this.props
        return (
            <div className="cate-container">
                <Header title="商品分类"/>
                <div className="content">
                    <ul className="left">
                        {
                            cate_list.map(item=>(
                                <li  className={item.id == active_id?"active":""} key={item.id}
                                onClick={()=>this.change_goods(item.id,item.catename)}
                                >{item.catename}</li>
                            ))
                        }
                        
                    </ul>
                    <ul className="right">
                        <li className="section">
                            <h3>{cate_name}<span onClick={()=>history.push("/goods_list/?type_id="+active_id+"&type_name="+cate_name)} style={{float:'right',fontSize:14,fontWeight:'normal'}}>查看更多&gt;&gt;</span></h3>
                            <ul>
                                {
                                    goods_list.map(item=>(
                                        <li key={item.id}>
                                            <img src={this.$static_host+item.img} alt="" />
                                            <p>{item.goodsname}</p>
                                        </li>
                                    ))
                                }
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}
